import { Form, Row, Spin } from 'antd';
import React, { Ref, useRef } from 'react';

import { getCompanyID, getUserDepID, onCloseModalCommon } from '@/utils';
import pageStyles from '@/common/pageLayout.less';

import { OneModal } from '../one-ui';
import { IOneModalRef } from '../one-ui/OneModal/type';
import DeptPosLinkageUser from '../DeptPosLinkageUser';

export const SelectUserFormModal = ({ onClose, onSelect, loading }) => {
  /** 弹框的ref */
  const OneModalRef: Ref<IOneModalRef> = useRef(null);

  /** 表单form对象 */
  const [updateFrom] = Form.useForm();

  /** 弹框高度样式 */
  const modalBodyStyle: React.CSSProperties = {
    // height: document.body.clientHeight * 0.18,
    padding: 0,
  };

  return (
    <OneModal
      open={true}
      getContainer={false}
      ref={OneModalRef}
      confirmLoading={loading}
      title={'加签办理'}
      onCancel={onClose}
      width={document.body.clientWidth * 0.25}
      bodyStyle={modalBodyStyle}
      onOk={() => {
        updateFrom?.validateFields()?.then((res) => {
          onSelect(res);
          onCloseModalCommon(OneModalRef);
        });
      }}
    >
      <Spin spinning={false}>
        <div className={pageStyles['fromView-styles']} style={{ marginTop: 15 }}>
          <Form labelAlign="right" form={updateFrom}>
            <Row>
              <DeptPosLinkageUser
                formRef={updateFrom}
                colSpan={24}
                isNO_label={true}
                org_label={'加签岗位'}
                user_label={'加签人'}
                orgamParams={{ params: 1, flowType: 'null', orgID: getUserDepID() }}
                isDeptRequired={true}
                isUserRequired={true}
                isNo_selectCompany={false}
                isNO_selectDepartment={false}
                isNo_selectPosition={true}
                notUser={true}
                formCompanyID="CompanyID"
                formDepartmentID="DeptID"
                formPositionID="PosID"
                formUserID="UserID"
              />
            </Row>
          </Form>
        </div>
      </Spin>
    </OneModal>
  );
};
